<template>
  <div class="tsne">
    <Card>
      <p class="header" slot="title">
        <Icon type="stats-bars"></Icon>Scatter
      </p>
      <Select placeholder="选择地理区域" v-model="location_index">
        <Option
          v-for="i in location_indexes"
          :value="i"
          :key="i"
        >{{i}} - {{ST_location_id_2_name[i]}}</Option>
      </Select>
      <div ref="ele" class="chart"></div>
    </Card>
  </div>
</template>
<script>
import echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      chart: echarts.init(document.createElement("null")),
      scatter_data: {},
      location_index: 0
    };
  },
  async mounted() {
    let chart = echarts.init(this.$refs["ele"]);
    this.chart = chart;
    this.chart.showLoading();
    await this.load_scatter_json();
    this.chart.hideLoading();
    this.chart.setOption(this.echarts_options);
  },
  computed: {
    location_indexes() {
      return Object.keys(this.scatter_data);
    },
    ST_location_id_2_color() {
      return this.$store.getters.ST_location_id_2_color;
    },
    ST_location_id_2_name() {
      return this.$store.getters.ST_location_id_2_name;
    },
    xAxis() {
      return {};
    },
    yAxis() {
      return {};
    },
    grid() {
      return {
        left: 25,
        right: 15,
        bottom: 20,
        show: true
      };
    },
    series_scatter() {
      return {
        xAxisIndex: 0,
        yAxisIndex: 0,
        name: "t-SNE",
        type: "scatter",
        itemStyle: {
          color:this.ST_location_id_2_color[this.location_index]
        },
        symbolSize: 3,
        large: true,
        data: this.scatter_data[this.location_index]
          ? this.scatter_data[this.location_index].map(e => {
              return [e.x, e.y, e.location];
            })
          : []
      };
    },
    echarts_options() {
      return {
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        grid: this.grid,
        brush: {
          toolbox: ["rect", "polygon", "keep", "clear"],
          inBrush: {
            color: "blue"
          },
          outOfBrush: {
            color: "red"
          }
        },
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: 0
          },
          {
            type: "inside",
            yAxisIndex: 0
          }
        ],
        series: [this.series_scatter]
      };
    }
  },
  methods: {
    load_scatter_json() {
      return new Promise(resolve => {
        axios
          .get(
            "http://m.tuniucdn.com/fb2/t1/G5/M00/2D/74/Cii-tF0EsVSIGDrvABtn4vzQefUAAW6HAAqyBgAG2f637.json"
          )
          .then(axresp => {
            this.scatter_data = axresp.data;
            resolve();
          })
          .catch(axerr => {
            debugger;
            alert(axerr);
          });
      });
    }
  },
  watch: {
    echarts_options: function() {
      this.chart.setOption(this.echarts_options);
    }
  }
};
</script>
<style lang="scss" scoped>
.tsne {
  // width: 500px;
  // height: 500px;
  .chart {
    width: 100%;
    height: 470px;
  }
}
</style>
